<template>

  <view>
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="content">
      <view class="list" style="background: #fff;">
        <view class="row u-flex" v-for="(item,index) in addressList" :key="item.addressId" @tap="select(item)">
          <view class="left">
            <u-icon name="map" color="#f9d39b" size="28"></u-icon>
          </view>
          <view class="center">
            <view class="name-tel u-flex">
              <view class="name">{{item.receiveName}}</view>
              <view class="tel">{{item.mobile}}</view>
              <view class="default" v-if="item.isDefault == 1">
                默认
              </view>
            </view>
            <view class="address">
              {{item.areaInfo}} {{item.addressInfo}}
            </view>
          </view>
          <view class="right">
            <view class="icon u-flex" @tap.stop="edit(item)">
              <f-icon name="edit" size="40"></f-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="add u-flex"
      :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
      <u-button type="primary" shape="circle" @tap="add">新增地址</u-button>
    </view>
  </view>
</template>
<script>
  import base from '@/config/baseUrl.js';
  import {
    getMyAddressList
  } from '@/config/api.js'
  export default {
    data() {
      return {
        systemInfo: base.systemInfo,
        isSelect: false,
        addressList: []
      };
    },
    onShow() {
      let self = this;
      console.log("/////////")
      uni.getStorage({
        key: 'delAddress',
        success: (e) => {
          //换成接口获取
          self.getList()
          uni.removeStorage({
            key: 'delAddress'
          })
        }
      })
      uni.getStorage({
        key: 'saveAddress',
        success: (e) => {
          console.log("------------")
          //换成接口获取
          self.getList()
          uni.removeStorage({
            key: 'saveAddress'
          })
        }
      })
    },
    onLoad(e) {
      if (e.type == 'select') {
        this.isSelect = true;
      }
      this.getList()
    },
    methods: {
      getList() {
        console.log("888888888")
        getMyAddressList().then((res) => {
          this.addressList = res
        })
      },
      edit(row) {
        uni.navigateTo({
          url: "editAddress?type=edit&addressId=" + row.addressId
        })

      },
      add() {
        uni.navigateTo({
          url: "editAddress?type=add"
        })
      },
      select(row) {
        //是否需要返回地址(从订单确认页跳过来选收货地址)
        if (!this.isSelect) {
          return;
        }
        uni.setStorage({
          key: 'selectAddress',
          data: row,
          success() {
            uni.navigateBack();
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120upx;
    justify-content: center;
    background: #fff;

    .btn {
      width: 100%;
      color: #fff;
      padding: 20rpx;

      .icon {
        height: 80upx;
        color: #fff;
        font-size: 30upx;
        justify-content: center;

      }

      font-size: 30upx;
    }
  }

  .list {
    flex-wrap: wrap;

    .row {
      padding: 20upx 24upx;
      border-bottom: 1px solid #eee;

      .left {
        width: 90upx;
        flex-shrink: 0;

        .head {
          width: 70upx;
          height: 70upx;
          background: linear-gradient(to right, #ccc, #aaa);
          color: #fff;
          justify-content: center;
          border-radius: 60upx;
          font-size: 35upx;
        }
      }

      .center {
        width: 100%;
        flex-wrap: wrap;

        .name-tel {
          width: 100%;
          align-items: baseline;

          .name {
            font-size: 34upx;
          }

          .tel {
            margin-left: 30upx;
            font-size: 24upx;
            color: #777;
          }

          .default {
            font-size: 22upx;
            background-color: #ff9d02;
            color: #fff;
            padding: 0 18upx;
            border-radius: 24upx;
            margin-left: 20upx;
          }
        }

        .address {
          width: 100%;
          font-size: 24upx;
          align-items: baseline;
          color: #777;
        }
      }

      .right {
        flex-shrink: 0;
        margin-left: 20upx;

        .icon {
          justify-content: center;
          width: 80upx;
          height: 60upx;
          border-left: solid 1upx #aaa;
          font-size: 40upx;
          color: #777;
        }
      }
    }
  }
</style>